<template>
  <div class="home">
    <!-- 商品详情 -->
    <div class="nav-bar">
      <van-nav-bar
        title="商品详情"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
      >
        <template #right>
          <van-icon name="ellipsis" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 轮播 -->
    <div class="slider">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 手机介绍 -->
    <div class="introduce">
      <div
        class="title-1"
        style="font-size: 20px; margin-left: 10px; margin-top: 20px"
      >
        中兴 Axon 40 Ultra
      </div>
      <div class="title-2">￥ 5298</div>
      <div class="title-3">
        <p
          style="font-size: 0.59733rem; margin-bottom: 10px; margin-left: 10px"
        >
          ①12期花呗免息,每天仅需13.8元②送99元原厂保护壳③好评返10000积分」
        </p>
        <p
          style="font-size: 0.59733rem; margin-bottom: 10px; margin-left: 10px"
        >
          【无缺全面屏】第3代屏下摄像技术,6.8“柔性超窄边全面屏
        </p>
        <p
          style="font-size: 0.59733rem; margin-bottom: 10px; margin-left: 10px"
        >
          【6400万三主摄】人文、超广角、潜望长焦定制光学三主摄
        </p>
        <p
          style="font-size: 0.59733rem; margin-bottom: 10px; margin-left: 10px"
        >
          【巅峰性能】全新骁龙8+UFS3.1+满血LPDDR5,掌控大场面
        </p>
        <br />
        <br />
        <div class="title-3-1">
          <div><span class="iconfont">&#xe601;</span> 收藏</div>
          <div><span class="iconfont;">&#xe602;</span> 以旧换新</div>
          <div><span class="iconfont">&#xe600;</span> 分享赚</div>
        </div>
      </div>
    </div>
    <!-- 折叠面板|赠品 -->
    <van-collapse v-model="activeNames">
      <van-collapse-item name="1">
        <template #title>
          <div style="font-size: 14px">赠品</div>
        </template>
        <div style="display: flex; justify-content: space-between">
          <div>
            <img
              style="width: 50px; height: 50px; margin-top: 20px"
              src="https://image.ztemall.com/04700069c8799e0d8e4b4e034658060e.jpg?x-oss-process=image/resize,w_220,h_220"
              alt=""
            />
          </div>
          <div>
            <p>ZTE中兴 Axon 40 Ultra 手机保护壳</p>
            <p>颜色：黑色</p>
          </div>
          <div style="line-height: 60px"><span>X1</span></div>
        </div>
      </van-collapse-item>
    </van-collapse>
    <!-- 已选|遮罩层 -->
    <div
      @click="haha"
      style="
        height: 47px;
        margin: 10px;
        border-radius: 5px;
        background-color: #fff;
        line-height: 47px;
        display: flex;
        justify-content: space-around;
      "
    >
      <div
        style="color: rgba(0, 0, 0, 0.9); font-weight: 700; margin-left: -5px"
      >
        已选
      </div>
      <div><span style="color: red">水墨 8GB+256GB 官方标配</span></div>
      <div><van-icon name="arrow" /></div>
    </div>
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :goods-id="goodsId"
      :quota="quota"
      :quota-used="quotaUsed"
      :hide-stock="sku.hide_stock"
      :message-config="messageConfig"
    />
    <!-- 规格 -->
    <div class="norms">
      <div class="swiper mySwiper" style="overflow: hidden">
        <div class="swiper-wrapper">
          <div
            style="
              width: 38px;
              height: 22px;
              margin-top: 50px;
              margin-left: -125px;
              position: absolute;
              color: rgba(0, 0, 0, 0.9);
              font-weight: 700;
            "
          >
            规格
          </div>
          <div class="swiper-slide">
            <div>
              <img
                style="width: 20px; height: 20px"
                src="	https://image.ztemall.com/7b3e2bf2866da2dfbade19e5053bcb92.png"
                alt=""
              />
            </div>
            <div style="width: 71px; height: 20px">屏幕尺寸</div>
            <div>6.8英寸</div>
          </div>
          <div class="swiper-slide">
            <div>
              <img
                style="width: 20px; height: 20px"
                src="	https://image.ztemall.com/e9eeec30dfd575113504819e8e9ca072.png"
                alt=""
              />
            </div>
            <div>运行内存</div>
            <div>8GB及以上</div>
          </div>
          <div class="swiper-slide">
            <div>
              <img
                style="width: 20px; height: 20px"
                src="	https://image.ztemall.com/5e8c371e30d75444c3fea3831d86411f.png"
                alt=""
              />
            </div>
            <div>存储容量</div>
            <div>256GB及以上</div>
          </div>
          <div class="swiper-slide">
            <div>
              <img
                style="width: 20px; height: 20px"
                src="	https://image.ztemall.com/1fd3e0957a0b3f402d04cd5f9cb379c2.png"
                alt=""
              />
            </div>
            <div>处理器</div>
            <div>骁龙8 Gen1</div>
          </div>
          <div class="swiper-slide">
            <div>
              <img
                style="width: 20px; height: 20px"
                src="	https://image.ztemall.com/b1f08ce65564f4fd931de3dea3e34a93.png"
                alt=""
              />
            </div>
            <div style="margin-top: 3px">电池容量</div>
            <div style="margin-top: 3px">5000mAh</div>
          </div>
          <div class="swiper-slide">
            <div>
              <img
                style="width: 20px; height: 20px"
                src="	https://image.ztemall.com/90f16d04f5449b571b91ce248d300b65.png"
                alt=""
              />
            </div>
            <div style="margin-top: 3px">屏幕分辨率</div>
            <div style="margin-top: 3px">2480*1116</div>
          </div>
          <div class="swiper-slide">
            <div>
              <img
                style="width: 20px; height: 20px"
                src="	https://image.ztemall.com/90f58560fb9a7c2fea43010a3d7004c4.png"
                alt=""
              />
            </div>
            <div style="margin-top: 3px">运营商网络</div>
            <div style="margin-top: 3px">SA/NSA双模5G</div>
          </div>
          <div class="swiper-slide">
            <div>
              <span style="width: 20px; height: 20px" class="iconfont"
                >&#xe603;</span
              >
            </div>
            <div style="margin-top: 3px">更多配置</div>
            <div style="margin-top: 3px">参数详情</div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!-- 服务 -->
    <div class="serves">
      <div
        style="
          width: 43px;
          height: 22px;
          margin-top: 20px;
          float: left;
          padding-left: 10px;
          color: rgba(0, 0, 0, 0.9);
          font-weight: 700;
        "
      >
        服务
      </div>
      <div
        style="
          width: 280px;
          height: 65px;
          float: right;
          display: flex;
          flex-wrap: wrap;
        "
      >
        <div style="width: 130px; height: 20px">
          <img
            src="	https://image.ztemall.com/6b679dfbbf1ec60bea18a7f93e1f02c7.png"
            alt=""
            style="width: 15px; height: 15px"
          />
          <span style="font-size: 0.46933rem; color: #8e8e8e">99元免运费</span>
        </div>
        <div style="width: 130px; height: 20px">
          <img
            src="https://image.ztemall.com/c8edea1e72525428fc1f1f7a67eee181.png"
            alt=""
            style="width: 15px; height: 15px"
          /><span style="font-size: 0.46933rem; color: #8e8e8e"
            >官方发货&售后</span
          >
        </div>
        <div style="width: 130px; height: 20px">
          <img
            src="	https://image.ztemall.com/70282ba616302784e84dc794f9a8fe9f.png"
            alt=""
            style="width: 15px; height: 15px"
          /><span style="font-size: 0.46933rem; color: #8e8e8e"
            >7天无理由退货</span
          >
        </div>
      </div>
    </div>
    <!-- 推荐 -->
    <div class="recommend">推荐商品</div>
    <!-- 推荐的手机 -->
    <div>
      <div class="recommend-phone">
        <div class="swiper mySwiper1" style="overflow: hidden">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              style="background-color: #fff; border-radious: 10px"
            >
              <div>
                <img
                  style="width: 60px; height: 60px"
                  src="	https://image.ztemall.com/44ad43838c54c578ae19e4f8f5f05c0c.png?x-oss-process=image/resize,w_440,h_440"
                  alt=""
                />
              </div>
              <div>中兴 Axon 40 Pro</div>
              <div>￥2998</div>
            </div>
            <div
              class="swiper-slide"
              style="background-color: #fff; border-radious: 10px"
            >
              <div>
                <img
                  style="width: 60px; height: 60px"
                  src="https://image.ztemall.com/e3776e1358bb9e560a267958f988ce34.jpg?x-oss-process=image/resize,w_440,h_440"
                  alt=""
                />
              </div>
              <div>中兴Axon 30 5G 屏...</div>
              <div>￥1998</div>
            </div>
            <div
              class="swiper-slide"
              style="background-color: #fff; border-radious: 10px"
            >
              <div>
                <img
                  style="width: 60px; height: 60px"
                  src="https://image.ztemall.com/65de94cb7dfa6bcfe5ba948013a4a86e.png?x-oss-process=image/resize,w_440,h_440"
                  alt=""
                />
              </div>
              <div>中兴 Axon 30 Ultra 5G</div>
              <div>￥4698</div>
            </div>
            <div
              class="swiper-slide"
              style="background-color: #fff; border-radious: 10px"
            >
              <div>
                <img
                  style="width: 60px; height: 60px"
                  src="https://image.ztemall.com/a78c625c79032014d42c4861739bb6f9.png?x-oss-process=image/resize,w_440,h_440"
                  alt=""
                />
              </div>
              <div>中兴 畅行30</div>
              <div>￥798</div>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
    <!-- 用户评论 -->
    <div class="comment">
      <div
        class="comment-1"
        style="float: left; margin-top: 10px; margin-left: 10px"
      >
        用户评论
      </div>
      <div
        class="comment-2"
        style="float: right; margin-top: 10px; margin-right: 10px"
      >
        全部评论<van-icon name="arrow" />
      </div>
    </div>
    <!-- 评论区内容 -->
    <div class="comment-content">
      <div class="swiper mySwiper2" style="overflow: hidden">
        <div class="swiper-wrapper" style="width: 1200px">
          <div
            class="swiper-slide"
            style="width: 300px; background-color: #fff; border-radious: 60px"
          >
            <div style="margin-left: -290px; margin-top: -80px">用户甲</div>
            <div style="margin-top: 20px">
              东西不错，希望越来越好。支持国货。
            </div>
            <div>
              <img
                style="
                  width: 80px;
                  height: 80px;
                  margin-right: 10px;
                  margin-top: 30px;
                "
                src="https://image.ztemall.com/ff443c0f540850ac42de688620f219cc.jpg?x-oss-process=image/resize,w_640,h_640"
                alt=""
              />
              <img
                style="
                  width: 80px;
                  height: 80px;
                  margin-right: 10px;
                  margin-top: 30px;
                "
                src="https://image.ztemall.com/0b3a4d71a13ff13acf7552edff3ac13d.jpg?x-oss-process=image/resize,w_640,h_640"
                alt=""
              />
              <img
                style="
                  width: 80px;
                  height: 80px;
                  margin-right: 10px;
                  margin-top: 30px;
                "
                src="https://image.ztemall.com/d5bfc78960daaf56ea4cd3c1323acc7b.jpg?x-oss-process=image/resize,w_640,h_640"
                alt=""
              />
            </div>
          </div>
          <div
            class="swiper-slide"
            style="width: 300px; background-color: #fff"
          >
            Slide 2
          </div>
          <div
            class="swiper-slide"
            style="width: 300px; background-color: #fff"
          >
            Slide 3
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <!-- 图文详情 -->
    <van-tabs v-model="active">
      <van-tab title="图文详情">
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/48d9fc009b68737a773d7a3dc3d42dab.gif"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/d68f940484b7dbbbb443e8896ac3bb69.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/8ce70b294d8259f8ea1cd3285b162178.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/ed5618438e81777d7987364e8dfe4c4c.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/a7ffecc5773e4c4b723d0016f703a581.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/b35fb00b249144b232ccb632a2cea92a.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/fd7ca408338393915ec2e5dce31d6953.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/fa2b3d7da1f2975218b7713f66c56a4d.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/669eeedb7954f03553afc1e5ec2a3bc6.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/2e6922dff5c6d7446cda5a19a32a1be8.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/32ee6c2639905ad0fc07901a4e3172de.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/85bcb5ea86c1a5fdf4dff354948561fa.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/a993d6a0051475c03a1ef6b8dda1259c.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/40353cf655d0bc2fca699be424cc65c2.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/1edfd9326b3b007ba9d283f57dd81cb3.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/efd626d60b0a9f0a2dc10f051bdc7cd6.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/c6571f5f15d5ea9118d310c3b1a3d578.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/f72784ccaeb7561514630651750591a4.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/92264017ca733b9ba492ae76119a946d.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/c166bc51ce9e0f51a8358df1a353e9d0.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/3382ef0bf68d93e3d4c6482fef4b6ad5.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/05ab105b1407db8184f2b751fba96aa3.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/9baf30c72bfda507d97f9c356dca62a8.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/d8662afc63480fe740a69ae4a364f600.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/a572862a89b0341bf6783124daa13e51.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/268e0c557067b8d41ae41241b1641ddb.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/d82ad257ea249098563f23571ba990ff.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/4936a0f7cff68e3f1869e984b863915e.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/54e1623633ad4190e01b1f0664680d75.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/eeca04abc452422d6252f9299247f4d5.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/9c8be3019f1800832a3d683c68d161fa.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/60d33bee6a056a3616ac6ee0d1e6d224.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/1c8d64e58e93cf6b9b1fa316f8307fd7.jpg"
            alt=""
          />
        </div>
        <div>
          <img
            style="width: 100%"
            src="https://image.ztemall.com/7a871253dbf2e251bf2e011bc25bdf10.jpg"
            alt=""
          />
        </div>
      </van-tab>
      <van-tab title="详细参数">
        <div style="height: 134px; background-color: #fff; margin: 10px">
          <div style="margin-bottom: 30px; font-weight: 600; margin-left: 10px">
            存储
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            机身内存(ROM) <span style="margin-left: 30px">256GB及以上</span>
          </div>
          <div
            style="
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            运行内存(RAM) <span style="margin-left: 30px">8G及以上</span>
          </div>
        </div>
        <div style="height: 173px; background-color: #fff; margin: 10px">
          <div style="margin-bottom: 30px; font-weight: 600; margin-left: 10px">
            屏幕
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            屏幕尺寸 <span style="margin-left: 30px">6.8英寸</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            屏幕类型 <span style="margin-left: 30px">OLED曲面屏</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            分辨率 <span style="margin-left: 30px">2480*1116</span>
          </div>
        </div>
        <div style="height: 192px; background-color: #fff; margin: 10px">
          <div style="margin-bottom: 30px; font-weight: 600; margin-left: 10px">
            网络
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            2G/3G网络
            <span style="margin-left: 30px"
              >3G WCDMA(联通)、2G GSM(移动/联通)</span
            >
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            4G网络
            <span style="margin-left: 30px"
              >4G: TD-LTE(移动) 4G FDD-LTE(联通、电信)</span
            >
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            5G网络 <span style="margin-left: 30px">移动5G、联通5G、电信5G</span>
          </div>
        </div>
        <div style="height: 271px; background-color: #fff; margin: 10px">
          <div style="margin-bottom: 30px; font-weight: 600; margin-left: 10px">
            传输功能
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            WLAN热点 <span style="margin-left: 30px">WiFi热点</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            NFC
            <span style="margin-left: 30px"
              >支持（点对点模式）、支持（读卡器模式）</span
            >
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            GPS <span style="margin-left: 30px">支持</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            蓝牙 <span style="margin-left: 30px">蓝牙5.2</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            WLAN <span style="margin-left: 30px">WIFI6</span>
          </div>
        </div>
        <div style="height: 154px; background-color: #fff; margin: 10px">
          <div style="margin-bottom: 30px; font-weight: 600; margin-left: 10px">
            拍摄功能
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            后置摄像头
            <span style="margin-left: 30px"
              >6400万像素+6400万像素(广角)+6400万像素</span
            >
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            前置摄像头 <span style="margin-left: 30px">1600万像素</span>
          </div>
        </div>
        <div style="height: 330px; background-color: #fff; margin: 10px">
          <div style="margin-bottom: 30px; font-weight: 600; margin-left: 10px">
            主体
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            CPU型号 <span style="margin-left: 30px">骁龙8 Gen1</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            名称<span style="margin-left: 30px">中兴Axon 40 Ultra</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            双卡类型 <span style="margin-left: 30px">双卡双待单通</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            型号<span style="margin-left: 30px">ZTE A2023P</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            上市时间 <span style="margin-left: 30px">2022/5</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            品牌 <span style="margin-left: 30px">中兴(ZTE)</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            操作系统<span style="margin-left: 30px">Android</span>
          </div>
        </div>
        <div style="height: 212px; background-color: #fff; margin: 10px">
          <div style="margin-bottom: 30px; font-weight: 600; margin-left: 10px">
            传感器
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            距离感应 <span style="margin-left: 30px">支持</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            光线感应 <span style="margin-left: 30px">支持</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            指纹识别 <span style="margin-left: 30px">支持</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            人脸识别 <span style="margin-left: 30px">支持</span>
          </div>
        </div>
        <div style="height: 290px; background-color: #fff; margin: 10px">
          <div style="margin-bottom: 30px; font-weight: 600; margin-left: 10px">
            其他
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            电池容量<span style="margin-left: 30px">5000mAh(典型值)</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            机身尺寸(mm)<span style="margin-left: 30px">163.2*73.5*8.4</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            机身重量(g)<span style="margin-left: 30px">204</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            充电接口<span style="margin-left: 30px">type-c</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            耳机接口<span style="margin-left: 30px">type-c</span>
          </div>
          <div
            style="
              margin-bottom: 20px;
              margin-left: 10px;
              font-size: 0.512rem;
              color: rgba(0, 0, 0, 0.54);
            "
          >
            SM卡类型<span style="margin-left: 30px">Nano SIM</span>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="wap-home-o" text="首页" />
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import "../assets/font/download/font_3497968_ntyl1t03kz/iconfont.css";
import "../assets/font/font_3497968_nl00o01fo8b/iconfont.css";
import Swiper from "swiper";
import Vue from "vue";
import {
  NavBar,
  Icon,
  Toast,
  Swipe,
  SwipeItem,
  Lazyload,
  Collapse,
  CollapseItem,
  Overlay,
  Button,
  Sku,
  Tab,
  Tabs,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
} from "vant";
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(Icon);
Vue.use(Sku);
Vue.use(Overlay);
Vue.use(Button);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Icon);
Vue.use(NavBar);
Vue.use(Lazyload);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Tab);
Vue.use(Tabs);

// @ is an alias to /src

export default {
  methods: {
    onClickLeft() {
      this.$router.push("/index");
    },
    haha() {
      this.show = !this.show;
    },

    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      Toast("点击按钮");
    },
  },
  created() {
    window.scrollTo(0, 0);
  },
  data() {
    return {
      images: [
        // 轮播图图片
        "https://image.ztemall.com/041bc273670ae05dc40bd900ef66c2ad.jpg?x-oss-process=image/resize,w_640,h_640",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
      // 折叠面板
      activeNames: ["1"],
      // 已选|遮罩层
      show: false,
      goodsId: 1,
      quota: 5,
      quotaUsed: 0,
      sku: {
        // 数据结构见下方文档
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1",
            // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "水墨", // skuValueName：规格值名称
              },
              {
                id: "2",
                name: "敦煌",
              },
            ],
          },
          {
            k: "套餐类型", // skuKeyName：规格类目名称
            k_s: "s2",
            // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                name: "官方标配",
              },
            ],
          },
          {
            k: "版本", // skuKeyName：规格类目名称
            k_s: "s2",
            // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                name: "8GB+256GB",
              },
            ],
          },
        ],

        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 2259, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id

            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
          {
            id: 2259, // skuId
            s1: "2", // 规格类目 k_s 为 s1 的对应规格值 id

            price: 180, // 价格（单位分）
            stock_num: 200, // 当前 sku 组合对应的库存
          },
        ],
        price: "1.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
      },
      goods: {
        // 数据结构见下方文档

        picture:
          "https://image.ztemall.com/041bc273670ae05dc40bd900ef66c2ad.jpg?x-oss-process=image/resize,w_640,h_640",
      },
      messageConfig: {
        // 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
        uploadImg: () => {
          return new Promise((resolve) => {
            setTimeout(
              () =>
                resolve(
                  "	https://image.ztemall.com/041bc273670ae05dc40bd900…66c2ad.jpg?x-oss-process=image/resize,w_640,h_640"
                ),
              1000
            );
          });
        },
        // 可选项，自定义图片上传逻辑，使用此选项时，会禁用原生图片选择
        customUpload: () => {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve("https://img01.yzcdn.cn/vant/leaf.jpg");
            }, 1000);
          });
        },
        // 最大上传体积 (MB)
        uploadMaxSize: 3,
        // placeholder 配置
        placeholderMap: {
          text: "xxx",
          tel: "xxx",
        },
        // 初始留言信息
        // 键：留言 name
        // 值：留言内容
        initialMessages: {
          留言: "留言信息",
        },
      },
      active: 2,
    };
  },
  // 原型挂载
  mounted() {
    new Swiper(".mySwiper", {
      slidesPerView: 4,
      spaceBetween: 10,
      centeredSlides: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
    new Swiper(".mySwiper1", {
      slidesPerView: 3,
      spaceBetween: 10,
      freeMode: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
    new Swiper(".mySwiper2", {
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  },
  name: "HomeView",
  components: {},
};
</script>

<style lang="scss">
.home {
  background-color: #f4f4f4;
}
// 头部
.nav-bar {
  height: 46px;
  background: #fff;
}
.van-nav-bar .van-icon {
  color: black;
}
// 轮播
.slider {
  height: 375px;
  margin: 10px;
  background: gray;
  border-radius: 20px;
}
.my-swipe .van-swipe-item {
  font-size: 20px;
  height: 375px;
  line-height: 375px;
  text-align: center;
  // background-color: #39a9ed;
}
.van-swipe-item img {
  height: 375px;
  width: 100%;
}
// 手机介绍
.introduce {
  height: 350px;
  background-color: #fff;
  margin: 10px;
  overflow: hidden;
}
.title-1 {
  font-size: 0.68267rem;
  line-height: 1.4;
  margin: 0 0 0.064rem;
  font-weight: 700;
  color: #000;
  height: 30px;
}
.title-2 {
  color: red;
  font-size: 28px;
  height: 50px;
}
.title-3 {
  height: 270px;
  // background-color: red;
}
.title-3-1 {
  height: 40px;
  // background-color:rgb(221, 255, 0) ;
  margin-bottom: 0px;
  display: flex;
  justify-content: space-around;
  line-height: 40px;
  color: #676767;
}
// 折叠面板 赠品
.van-collapse-item {
  border-radius: 30px;
  margin: 10px;
}
// 遮罩层
// 规格|轮播
.norms {
  height: 100px;
  background-color: #fff;
  margin: 10px;
  border-radius: 10px;
}
// slider的名称不可随意更改！！！
.swiper {
  width: 100%;
  height: 100%;
}
.swiper-wrapper {
  position: relative;
  width: 690px;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}

.swiper-slide {
  flex-direction: column;
  text-align: center;
  font-size: 12px;
  // background: blue;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  // display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
// .swiper-slide swiper-slide-active {
//   width: 86px;
// }

// 服务
.serves {
  height: 65px;
  background-color: #fff;
  margin: 10px;
  border-radius: 10px;
}
// 推荐
.recommend {
  height: 42px;
  padding-left: 10px;
  padding-top: 10px;
}
// 推荐的手机
.recommend-phone {
  height: 156px;
  background-color: #f4f4f4;
}
// 用户评论
.comment {
  height: 32px;
  // background-color: red;
  margin-top: 20px;
}
// 评论区内容
.comment-content {
  height: 266px;
  background-color: #f4f4f4;
  margin-top: 10px;
  margin-bottom: 20px;
}
</style>
